<template>
	<div class="homeHeader">
		<div class="centerTitle">
			<div class="policeBu">
				cesium项目模板
			</div>
			<div class="HourMS">
				{{ time }}
			</div>
			<div class="sysTime">
				<div class="sysTimeTitle">
					系统时间
				</div>
				<div class="sysTimeyear">
					{{ year }}
				</div>
			</div>
		</div>
		<div class="header-right">
			<div class="userInfo">
				admin001<br />
				管理员
			</div>
			<div class="userBtn"></div>
			<div class="logoutBtn"></div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'HomeHeader',
	data() {
		return {
			time: '',
			year: ''
		}
	},
	created() {
		this.getDate()
	},
	methods: {
		getDate() {
			setInterval(() => {
				const date = new Date()
				const hour = date.getHours()
				const minute = date.getMinutes()
				const second = date.getSeconds()
				const month = date.getMonth() + 1
				const today = date.getDate()
				this.time = timeToString(hour) + ':' + timeToString(minute) + ':' + timeToString(second)
				this.year = date.getFullYear() + '/' + timeToString(month) + '/' + timeToString(today)
				const weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
				this.week = weekday[date.getDay()]
				function timeToString(nowTime) {
					if (nowTime < 10) {
						return '0' + nowTime
					} else {
						return '' + nowTime
					}
				}
			}, 1000)
		}
	}
}
</script>
<style lang="scss" scoped>
.homeHeader {
	width: 100%;
	height: 79px;
	position: absolute;
	top: 0;
	z-index: 100;
	background: url('/images/header-bg.png');
	background-size: 100% 100%;
	.centerTitle {
		display: flex;
		height: 41px;
		width: 540px;
		margin: 0 auto;
		margin-top: 20px;
		font-weight: bolder;
		.policeBu {
			min-width: 320px;
			height: 37px;
			line-height: 37px;
			text-align: center;
			color: #fff;
			font-size: 36px;
			letter-spacing: 6px;
			transform: scaleY(1.1);
		}

		.HourMS {
			font-family: DS-Digital;
			width: 106px;
			height: 41px;
			line-height: 41px;
			color: $theme-color;
			font-size: 33px;
			font-weight: 100;
			transform: scaleY(1.4);
		}

		.sysTime {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding-left: 10px;
			.sysTimeTitle {
				width: 75px;
				height: 16px;
				background: #ffcc66;
				color: black;
				font-size: 10px;
				line-height: 15px;
				text-align: center;
			}

			.sysTimeyear {
				font-family: DS-Digital;
				width: 60px;
				height: 16px;
				line-height: 16px;
				color: $theme-color;
				font-size: 16px;
				transform: scaleY(1.2);
				font-weight: 600;
			}
		}
	}
	.header-right {
		position: absolute;
		right: 19px;
		top: 13px;
		.userInfo {
			color: $theme-color;
			font-size: 12px;
			display: inline-block;
			margin-left: 8px;
			height: 37px;
			line-height: 18px;
		}
		.userBtn {
			width: 34px;
			height: 34px;
			background: url('/images/user.png');
			display: inline-block;
			margin-left: 8px;
			cursor: pointer;
		}
		.logoutBtn {
			width: 34px;
			height: 34px;
			background: url('/images/logout.png');
			display: inline-block;
			margin-left: 8px;
			cursor: pointer;
		}
	}
}
</style>
